<template>
  <div class="progress">
    <el-row>
      <el-col :span="3">
          <div class="left-text">整体进度:</div>
      </el-col>

      <el-col :span="21">
        <div>
            <el-progress :text-inside="true" :stroke-width="18" :percentage="step.num/5*100" status="success"></el-progress>
          </div>
          </el-col>
    </el-row>

    <el-row style="margin-top: 10px">
      <el-col :span="3">
          <div class="left-text">当前步骤: </div>
      </el-col>

      <el-col :span="21">
        <div  v-html="currentStep.text">
        </div>
      </el-col>
    </el-row>
    <!--<el-row>-->
      <!--<el-col :span="3">-->
      <!--<div v-if="textState === 'sim'">仿真实验步骤:</div>-->
          <!--<div v-else-if="textState === 'real'">实训实验步骤:</div>-->
      <!--</el-col>-->
      <!--<el-col :span="21">-->
        <!--<div v-if="textState === 'sim'">{{textS}}</div>-->
        <!--<div v-else-if="textState === 'real'">{{textR}}</div>-->
      <!--</el-col>-->
    <!--</el-row>-->
    <!--<el-row style="margin-top: 10px">-->
      <!--<el-col :span="3">-->
        <!--<div class="left-text">仿真验证点: </div>-->
      <!--</el-col>-->

      <!--<el-col :span="21">-->
        <!--<div  v-html="currentStep.text">-->
        <!--</div>-->
      <!--</el-col>-->
    <!--</el-row>-->
    <el-row style="margin-top: 10px">
      <el-col :span="3">
        <div class="left-text">实时进度查看: </div>
      </el-col>

      <el-col :span="21">
        <el-row>
        <!--<el-row style="position: fixed; width: 100%; bottom: 0">-->
          <el-col :span="11">
            20170001
            <div id='st1' style="border: 1px solid red; overflow:scroll;height: 200px; width: 80%;" v-html="realMessage.text"></div>
          </el-col>
          <el-col :span="11">
            20170002
            <div id='st2' style="border: 1px solid red; overflow:scroll;height: 200px; width: 80%;" v-html="realMessage2.text"></div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
      <!--<el-row>-->
        <!--<el-col :span="3">-->
          <!--<div class="left-text">已完成:-->
            <!--</div>-->
        <!--</el-col>-->
        <!--<el-col :span="8">-->
          <!--<div v-for="data in finish">-->
            <!--{{data}}-->
          <!--</div>-->
        <!--</el-col>-->
        <!--<el-col :span="3">-->
          <!--<div class="left-text">未完成: </div>-->
        <!--</el-col>-->
        <!--<el-col :span="8">-->
          <!--<div v-for="data in unfinish">-->
            <!--{{data}}-->
          <!--</div>-->
        <!--</el-col>-->
      <!--</el-row>-->

  </div>

</template>
<script>
  import {getMonitorData, wsPath, message} from '@/api/api'
  import { WebSocketBridge } from 'django-channels'
  const webSocketBridge1 = new WebSocketBridge()
  const webSocketBridge2 = new WebSocketBridge()

  export default {
    data () {
      return {
        textS: '',
        textR: '',
        finish: [],
        unfinish: [],
        step: this.$store.state.serverStep,
        textState: '',
        slug1: '',
        slug2: '',
        currentStep: {text: '监控'},
        realMessage: {text: '实验进度一'},
        realMessage2: {text: '实验进度二'}
      }
    },
    created () {
      this.initData()
    },
    updated: {
      items () {
        document.getElementById('st1').scrollTop = document.getElementById('st1').scrollHeight
      }
    },
    methods: {
      async initData () {
        try {
          getMonitorData().then((res) => {
            this.textS = res.data.textS
            this.textR = res.data.textR
            this.finish = res.data.finish
            this.unfinish = res.data.unfinish
            this.step = res.data.step
            this.textState = res.data.textState
            this.currentStep.text = res.data.currentStep
            this.slug1 = res.data.slug1
            this.slug2 = res.data.slug2
            message(this.slug1).then(res => {
              this.realMessage.text = res.data.posts
              webSocketBridge1.connect(wsPath + this.slug1 + '/stream/')
              let that = this
              webSocketBridge1.listen(function (action, stream) {
                console.log(action, stream)
                let a = that.realMessage
                console.log(a)
                that.realMessage.text = that.realMessage.text + action.html
              })
            }
            )
            message(this.slug2).then(res => {
              this.realMessage2.text = res.data.posts
              webSocketBridge2.connect(wsPath + this.slug2 + '/stream/')
              let that = this
              webSocketBridge2.listen(function (action, stream) {
                console.log(action, stream)
                let a = that.realMessage2
                console.log(a)
                that.realMessage2.text = that.realMessage2.text + action.html
              })
            }
            )
          })
        } catch (err) {
          console.log('获取数据失败', err)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .progress {
    margin: 20px;
    .el-progress {
      width: 80%;
    }
  }
  .left-text {
    float: right;
    margin-right: 10px;
  }
</style>


